<template>
  <div class="form-list">
    <div class="form-head">
      <h1 class="tit">商标专用权质权登记申请书</h1>
    </div>
    <div class="form-content">
      <el-form :label-positon="labelPosition" size="mini">
        <!-- 质权人名称 -->
        <el-form-item label="质权人名称(中文)：">
          <span>{{ formData.appName }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
          <span>{{ formData.appNameEn }}</span>
        </el-form-item>

        <!-- 质权人地址 -->
        <el-form-item label="质权人地址：">
          <span>{{ formData.busAddress }}</span>
        </el-form-item>
      </el-form>

      <!-- 质权人: 企业社会统一信用代码/个人身份证号码 -->
      <el-form :label-positon="labelPosition" size="mini">
        <el-form-item label="企业社会统一信用代码/个人身份证号码：">
          <span>{{ formData.busCode }}</span>
        </el-form-item>
      </el-form>

      <el-form :label-positon="labelPosition" size="mini">
        <!-- 质权人: 电话 -->
        <el-form-item label="电话：">
          <span>{{ formData.phone }}</span>
        </el-form-item>

        <!-- 质权人: 邮政编码 -->
        <el-form-item label="邮政编码：">
          <span>{{ formData.postCode }}</span>
        </el-form-item>

        <!-- 质权人: 代理机构名称 -->
        <!-- <el-form-item label="代理机构名称：">
          <span>{{ formData.appName }}</span>
        </el-form-item> -->

        <!-- 出质人名称 -->
        <el-form-item label="出质人名称(中文)：">
          <span>{{ formData.outNameCN }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
          <span>{{ formData.outNameEN }}</span>
        </el-form-item>

        <!-- 出质人地址 -->
        <el-form-item label="出质人地址：">
          <span>{{ formData.outAddress }}</span>
        </el-form-item>
      </el-form>

      <el-form :label-positon="labelPosition" size="mini">
        <!-- 出质人: 企业社会统一信用代码/个人身份证号码 -->
        <el-form-item label="企业社会统一信用代码/个人身份证号码：">
          <span>{{ formData.outCreditNum }}</span>
        </el-form-item>
      </el-form>

      <el-form :label-positon="labelPosition" size="mini">
        <!-- 出质人: 电话 -->
        <el-form-item label="电话：">
          <span>{{ formData.outPhoneNum }}</span>
        </el-form-item>

        <!-- 出质人: 邮政编码 -->
        <el-form-item label="邮政编码：">
          <span>{{ formData.outPostCode }}</span>
        </el-form-item>

        <!-- 代理机构名称 -->
        <!-- <el-form-item label="代理机构名称：">
          <span>{{ formData.appName }}</span>
        </el-form-item> -->

        <!-- 出质商标注册 -->
        <el-form-item label="出质商标注册号：">
          <span>{{ formData.tradeNumber }}</span>
        </el-form-item>

        <!-- 担保债权数额 -->
        <el-form-item label="担保债权数额：">
          <span>{{ formData.amount }}</span>
        </el-form-item>

        <!-- 质权登记期限 -->
        <!-- <el-form-item label="质权登记期限：">
          <span>自&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;。</span>
        </el-form-item> -->

        <!-- 营业执照 -->
        <el-form-item label="营业执照：">
          <div class="businessPsd">
            <imgshow>
              <img class="busImg" :src="this.mconfig.host+busimg" alt />
            </imgshow>
          </div>
        </el-form-item>
        <!-- 身份证 -->
        <el-form-item label="身份证：" v-if="appliType==1">
          <span>
            <img class="idCardImg" :src="this.mconfig.host+idcardimg" alt />
          </span>
        </el-form-item>

        <!-- 签字 -->
        <!-- <div class="signs">
          <el-row>
            <el-col :span="8" :offset="4">
              <span>质权人章戳(签字):</span>
            </el-col>
            <el-col :span="8" :offset="4">
              <span>出质人章戳(签字):</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="4">
              <span>代理机构章戳:</span>
            </el-col>
            <el-col :span="8" :offset="4">
              <span>代理机构章戳:</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="4">
              <span>代理人签字:</span>
            </el-col>
            <el-col :span="8" :offset="4">
              <span>代理人签字:</span>
            </el-col>
          </el-row>
        </div>-->
      </el-form>


    </div>

    <!-- 附页 -->
    <div class="form-head follower-title" v-if="common.length != 0">
      <p class="tit">其他共同质权人</p>
    </div>
    <proAppend class="myStyle" :callback="common"></proAppend>



    <div class="form-head" v-if="commons.length != 0">
      <p class="tit">其他共同出质人</p>
    </div>
    <proAppend class="myStyle" :callback="commons"></proAppend>

  </div>
</template>

<script>
import imgshow from '../common/imgshow'
import proAppend from '../common/proAppend'

export default {
  components:{
    imgshow,
    proAppend
  },
  data() {
    return {
      // 商标专用权质权登记事项变更申请书
      // 右对齐
      labelPosition: "right",
      common: [],
      commons: [],
      idcardimg: "", //身份证正面
      busimg: "", //营业执照
      appliType: "", //是否存在身份证
      // 字段名
      formData: {
        afterAmount: "", // 变更后担保债权数额
        agencyName: "", // 质权人:代理机构名称
        appChange: "1", // 申请变更事项
        beforeAmount: "", // 变更前担保债权数额
        branchNetworkId: "", // 网点编号
        creditNum: "", // 质权人: 企业社会统一信用代码/个人身份证号码
        id: "", // 商标专用权质权登记事项变更申请书ID
        outAddress: "", // 出质人地址
        outAgencyName: "", // 出质人：代理机构名称
        outCreditNum: "", // 出质人：企业社会统一信用代码/个人身份证号码
        outNameCN: "", // 出质人名称(中文)
        outNameEN: "", // 出质人名称(英文)
        outPhoneNum: "", // 出质人：电话
        outPostCode: "", // 出质人：邮政编码
        phoneNum: "", // 质权人：电话
        pledgeeAddress: "", // 质权人地址
        pledgeeNameCN: "", // 质权人名称(中文)
        pledgeeNameEN: "", // 质权人名称(英文)
        postCode: "", // 质权人：邮政编码
        proPledgeAppendJson: "", // 附加表
        subStatus: "1", // 状态
        tradeNumber: "", // 商标专用权质权登记证编号
        userId: "", // 用户id
      },
    };
  },
  methods: {
    // 数据请求
    funb(s) {
    
      this.$http
        .get("/trademark/ProPledge/findByIdDetl", {
          params: { id: s },
        })
        .then((res) => {
          console.log(res);
          this.idcardimg = res.data.data.data.idcardimg; //身份证正面
          this.busimg = res.data.data.data.busimg; //营业执照
          this.appliType = res.data.data.data.appliType; //是否存在身份证
          this.formData = res.data.data.data;
          this.common = res.data.data.append;
         
          this.commons = res.data.data.append2;
          console.log(this.common,33333333 );
        });
    },
  },
  mounted() {
    // 数据请求
    this.id = this.$route.query.id;
    this.funb(this.id);
  },
};
</script>
<style scoped>
.form-list .signs .el-row {
  margin: 50px 0;
}
.myStyle{
  margin-left: 102px;
}
.form-list {
  width: 100%;
  margin-left: 100px;
} 

.form-head>h1{
  width: 100%;  
  padding-left: 220px;
}
.form-head p{
  margin: 50px 1px 20px 0;
}
.tit{
  width: 100%;  
  padding-left: 220px;
  font-size: 25px;
}

.form-content {
  width: 1000px;
  margin-top: 20px;
   /* margin-left: 10%; */
}


.form-list /deep/ .el-form-item__label {
  width: 320px;
  font-size: 14px;
  text-align: right;
  line-height: 28px;
  color: #606266;
}

.form-list /deep/ .el-form-item__content span {
  width: 100%;
  line-height: 28px;
}
.form-list ::v-deep .el-form-item {
  margin: 0;
}

.form-list .el-input.el-input--mini {
  font-size: 14px;
}

.same-line {
  display: flex;
  justify-content: space-between;
}

.same-line .sign {
  font-size: 18px;
  color: rgb(191, 191, 191);
}

.same-line .el-form-item {
  width: 50%;
}

.same-line-s {
  display: flex;
  justify-content: space-between;
}

.same-line-s /deep/ .el-checkbox {
  width: 50%;
  text-align: left;
}

.form-list /deep/ .el-checkbox .el-checkbox__label {
  font-size: 18px;
}

.img-box {
  width: 150px;
  height: 150px;
  display: flex;
}

.img-box img {
  margin-right: 10px;
  width: 100%;
  height: 100%;
}

.form-list .el-row .el-col {
  text-align: left;
}

.form-list .el-row .el-col span {
  font-size: 18px;
}

.follower-title {
  font-size: 15px;
}
.form-bottom .el-form-item__label {
  width: 313px !important;
}
.form-head-all {
  padding-left: 30px;
}
.idCardImg {
  margin: 5px;
}
.busImg {
  margin: 5px;
}

.businessPsd {
  display: inline-block;
}
</style>
